import React, { useEffect, useState } from 'react';
import { Table, Space } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { TableColumn } from '../data';
import styles from '../../style.less';

const columns: ColumnsType<TableColumn> = [
  {
    title: '关键词',
    dataIndex: 'word',
    key: 'word',
    className: styles.content
  },
  {
    title: '竞争激烈强度',
    dataIndex: 'competition',
    key: 'competition',
    className: styles.content
  },
  {
    title: '操作',
    key: 'action',
    className: styles.content,
    render() {
      return (
        <Space size="middle">
          <a>编辑</a>
        </Space>
      )
    }
  }
]

export default function DetailTable(props: any) {

  const [tableData, setTableData] = useState([]);

  if (props.direction === 'left') {

  } else {

  }

  useEffect(() => {
    const obj:any = [{
      "mobilePV": "27694",
      "similar": "0.0",
      "recommendPriceMobile": "0.45",
      "recommendPricePc": "1.58",
      "pv": "32897",
      "recBid": "0.45",
      "show": "39",
      "competition": "3",
      "competitionPc": "3",
      "pcPV": "5203",
      "click": "8",
      "wordPackage": "",
      "competitionWise": "3",
      "groupName": "业务词",
      "businessPoints": [],
      "word": "yuan",
      "showReasons": []
    }];
    setTableData(obj);
  }, [])

  return (
    <div>
      <Table<TableColumn>
        dataSource={tableData}
        columns={columns}
        pagination={false}
        rowKey={(record) => record.word}
        // locale={{ emptyText: "空空如也呀~" }}
        scroll={{ y: 600 }}
      ></Table>
    </div>
  )
}
